<template>
  <div  class="dialogBox width_100 height_100">
    <div class="box">
      <div class="content">
        <img :src="dialogData.imgSrc" alt="" v-show="dialogData.imgSrc">
        <el-progress type="circle" v-show="dialogData.ifShowPercents" :percentage="percents" color="#1AC47C"></el-progress>
        <p
          v-for="(item, index) in dialogData.mainTips"
          :key="index"
          class="mainTip"
        >
          {{ item }}
        </p>
        <p class="subtips mt-15" v-if="dialogData.subTips">
          <span class="slot"><slot></slot></span>
          {{ dialogData.subTips }}
        </p>
      </div>
      <div class="foot flex-center">
        <div :class="'btn-' + item.color" v-for="(item,index) in dialogData.btnList" :key="index"
             @click="btnEvent(item.type)">
          {{ item.name }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'minDialogBox', // 小模态框
  props: {
    dialogData: {
      require: Object,
      default: {
        mainTips: ['第一行', '第二行'], // 主提示
        subTips: '', // 副提示 （补充）
        btnList: [{ // type对应事件名
          name: '按钮1',
          color: 'red',
          type: 'error'
        }, {
          name: '按钮2',
          color: 'blue',
          type: 'confirm'
        }, {
          name: '按钮3',
          color: 'white',
          type: 'back'
        }],
        imgSrc: null, // 是否展示图片
        ifShowPercents: false
      }
    }
  },
  computed: {
    percents () {
      return +this.$store.state.file.uploadPercent
    }
  },
  methods: {
    btnEvent (type) {
      // cacelBtnEvent,confirmBtnEvent
      this.$emit(type + 'BtnEvent')
    }
  }
}
</script>

<style lang="scss" scoped>
.dialogBox {
  position: fixed;
  z-index: 1999;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.49);

  .box {
    width: 560px;
    height: 300px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 5px;
    margin-top: 180px;
    position: relative;

    .content {
      width: 100%;
      overflow: hidden;
      text-align: center;
      padding-top: 60px;

      img {
        width: 64px;
        height: 64px;
      }

      ::v-deep .el-progress {
        .el-progress-circle {
          width: 64px !important;
          height: 64px !important;
        }

        .el-progress__text {
          font-size: 12px !important;
        }
      }

      p.mainTip {
        margin-top: 16px;
        text-align: center;
        height: 25px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #273553;
        line-height: 25px;
      }

      p.subtips {
        height: 20px;
        font-size: 14px;
        color: #5F7196;
        line-height: 20px;
        position: absolute;
        margin-top: 16px;
        left: 50%;
        transform: translateX(-50%);
        .slot {
          position: absolute;
          left: -24px;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }

    .foot {
      width: 100%;
      height: 42px;
      position: absolute;
      bottom: 30px;

      .btn-white {
        border-color: #D8DEE9;
      }
    }
  }
}
</style>
